<template>
	<view class="store-list-page">
		<!-- 导航栏 -->
		<uni-nav-bar 
			:fixed="true" 
			:status-bar="true" 
			title="附近门店" 
			left-icon="left" 
			background-color="#007AFF"
			color="#ffffff"
			:border="false"
			:shadow="false"
			@clickLeft="goBack">
		</uni-nav-bar>

		<view class="content">
			<!-- 搜索和历史记录容器 -->
			<view class="search-history-container">
				<!-- 搜索栏 -->
				<view class="search-section">
				<uni-search-bar 
					placeholder="输入需要搜索的内容" 
					radius="100"
					:clearButton="'auto'"
					:cancelButton="'none'"
					bgColor="#F8F8F8"
					v-model="searchValue"
					@confirm="handleSearch"
					class="custom-search-bar">
						<template #searchIcon>
							<image src="/static/搜索@2x.png" mode="aspectFit" class="search-icon"></image>
						</template>
					</uni-search-bar>
				</view>

				<!-- 历史记录 -->
				<view class="history-section" v-if="historyList.length > 0">
					<view class="history-content">
						<text class="history-label">历史记录:</text>
						<view class="history-tags">
							<uni-tag 
								v-for="(item, index) in historyList" 
								:key="index"
								:text="item"
								type="default"
								size="small"
								:inverted="true"
								:circle="true"
								@click="selectHistory(item)"
								class="history-tag-item">
							</uni-tag>
						</view>
					</view>
				</view>
			</view>

			<!-- 门店列表 -->
			<view class="store-list">
				<view class="store-item" v-for="(store, index) in storeList" :key="index">
					<uni-card :is-shadow="true" :is-full="false" spacing="0" padding="0">
						<view class="store-card-content">
							<!-- 第一行：门店名称和距离 -->
							<view class="store-header">
								<text class="store-name">{{ store.name }}</text>
								<text class="store-distance">{{ store.distance }}</text>
							</view>
							
							<!-- 第二行：评分和销量 -->
							<view class="store-rating-sales">
								<view class="store-rating-stars">
									<image 
										v-for="index in store.rating" 
										:key="index"
										src="/static/五星 拷贝@2x.png" 
										mode="aspectFit" 
										class="star-icon">
									</image>
								</view>
								<text class="rating-text">{{ store.rating }}分</text>
								<text class="sales-text">销量:{{ store.sales }}</text>
							</view>
							
							<!-- 第三行：左侧图片，右侧营业时间等信息 -->
							<view class="store-bottom-row">
								<!-- 左侧图片 -->
								<view class="store-image">
									<image :src="store.image" mode="aspectFill" class="store-img"></image>
								</view>
								
								<!-- 右侧营业时间和地址 -->
								<view class="store-details">
									<text class="detail-item">营业时间:周一至周五</text>
									<text class="detail-item">早上8:00-晚上22:00</text>
									<text class="detail-item">{{ store.address }}</text>
								</view>
							</view>
						</view>
					</uni-card>
				</view>
			</view>

			<!-- 底部提示 -->
			<view class="footer-tip">
				<text class="footer-text">暂无更多-</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	
	const searchValue = ref('')
	const historyList = ref([
		'飞飞汽车美容店',
		'飞飞汽修美容店',
		'飞飞汽修美容店'
	])
	const storeList = ref([
		{
			name: '车百事汽车生活馆',
			distance: '556m',
			rating: 4,
			sales: 556,
			businessHours: '周一至周五 早上8:00-晚上22:00',
			address: '山阳区人民路与解放路交叉口',
			image: '/static/store.png' // 使用项目中的图片，实际使用时替换为门店图片
		},
		{
			name: '车百事汽车生活馆',
			distance: '556m',
			rating: 4,
			sales: 556,
			businessHours: '周一至周五 早上8:00-晚上22:00',
			address: '山阳区人民路与解放路交叉口',
			image: '/static/store.png'
		}
	])
	
	const goBack = () => {
		uni.navigateBack()
	}
	
	const handleSearch = () => {
		if (searchValue.value.trim()) {
			// 添加到历史记录
			if (!historyList.value.includes(searchValue.value)) {
				historyList.value.unshift(searchValue.value)
				// 最多保留10条历史记录
				if (historyList.value.length > 10) {
					historyList.value.pop()
				}
			}
			uni.showToast({
				title: '搜索: ' + searchValue.value,
				icon: 'none'
			})
		}
	}
	
	const selectHistory = (item) => {
		searchValue.value = item
		handleSearch()
	}
</script>

<style lang="scss" scoped>
	.store-list-page {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.content {
		padding-top: 0;
		border: none;
		margin-top: 0;
	}

	.search-history-container {
		background-color: #f5f5f5;
		margin-bottom: 0;
		position: relative;
		z-index: 0;
	}

	.search-section {
		padding: 15px;
		padding-bottom: 5px;
		border: none;
		margin: 0;
		background-color: #007AFF;
	}

	.search-icon {
		width: 18px;
		height: 18px;
		margin-right: 20px;
	}

	.history-section {
		height: 100px;
		padding: 0 15px 15px 15px;
		border: none;
		margin: 0;
		background-color: #007AFF;
	}

	.history-content {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		line-height: 1.5;
	}

	.history-label {
		font-size: 14px;
		color: #ffffff;
		margin-right: 10px;
		margin-bottom: 0;
		flex-shrink: 0;
		white-space: nowrap;
	}

	.history-tags {
		display: inline-flex;
		flex-wrap: wrap;
		align-items: center;
		flex: 1;
		min-width: 0;
	}

	.store-list {
		padding-top: 0;
		margin-top: -60px;
	}

	.store-item {
		margin-bottom: 15px;
		position: relative;
		z-index: 1;
	}
	
	.store-item:first-child {
		margin-top: -10px;
	}

	.store-card-content {
		display: flex;
		flex-direction: column;
		padding: 15px;
	}

	.store-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8px;
	}

	.store-name {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
		flex: 1;
	}

	.store-distance {
		font-size: 14px;
		color: #007AFF;
		margin-left: 10px;
	}

	.store-rating-sales {
		display: flex;
		align-items: center;
		margin-bottom: 8px;
		flex-wrap: nowrap;
	}

	.store-rating-stars {
		display: flex;
		align-items: center;
		margin-right: 4px;
	}

	.star-icon {
		width: 14px;
		height: 14px;
		margin-right: 2px;
	}

	.rating-text {
		font-size: 12px;
		color: #666666;
		margin-left: 4px;
		margin-right: 8px;
	}

	.sales-text {
		font-size: 12px;
		color: #666666;
		margin-left: 0;
	}

	.store-bottom-row {
		display: flex;
		align-items: center;
		margin-top: 8px;
	}

	.store-image {
		width: 130px;
		height: 80px;
		margin-right: 12px;
		flex-shrink: 0;
	}

	.store-img {
		width: 100%;
		height: 100%;
		border-radius: 8px;
		background-color: #f0f0f0;
		object-fit: cover;
	}

	.store-details {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.detail-item {
		font-size: 12px;
		color: black;
		line-height: 20px;
		margin-bottom: 4px;
	}

	.footer-tip {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20px 0;
		margin-top: 10px;
		position: relative;
		
		&::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%);
			width: 200px;
			height: 1px;
			background-color: #e5e5e5;
			z-index: 0;
		}
	}

	.footer-text {
		font-size: 12px;
		color: #999999;
		position: relative;
		padding: 0 20px;
		background-color: #f5f5f5;
		z-index: 1;
	}
</style>

<style lang="scss">
	/* 全局样式，用于覆盖组件内部样式 */
	.uni-navbar__content {
		border-bottom: none !important;
		border: none !important;
	}
	
	.uni-navbar--border {
		border-bottom: none !important;
		border: none !important;
	}
	
	.uni-navbar__header {
		border-bottom: none !important;
		border: none !important;
	}
	
	.uni-searchbar__box {
		border: none !important;
		box-shadow: none !important;
		outline: none !important;
		padding: 5px 8px 5px 8px !important;
	}
	
	.uni-searchbar__box-icon-search {
		order: 3 !important;
		padding: 0 0 0 8px !important;
		margin-left: auto !important;
	}
	
	.uni-searchbar__box-search-input {
		order: 1 !important;
		margin-left: 5px !important;
		margin-right: 0 !important;
	}
	
	.uni-searchbar__box-icon-clear {
		order: 2 !important;
		padding-left: 8px !important;
	}
	
	.uni-searchbar__text-placeholder {
		margin-left: 5px !important;
		margin-right: 0 !important;
		order: 1 !important;
	}
	
	/* 历史记录标签样式 - 透明背景，白色文字 */
	.history-section .uni-tag {
		background-color: transparent !important;
		background: transparent !important;
		border: none !important;
		border-color: transparent !important;
		color: #ffffff !important;
	}
	
	.history-section .uni-tag--default {
		background-color: transparent !important;
		background: transparent !important;
		border: none !important;
		border-color: transparent !important;
		color: #ffffff !important;
	}
	
	.history-section .uni-tag--default--inverted {
		background-color: transparent !important;
		background: transparent !important;
		border: none !important;
		border-color: transparent !important;
		color: #ffffff !important;
	}
	
	.history-section .uni-tag--inverted {
		background-color: transparent !important;
		background: transparent !important;
		border: none !important;
		border-color: transparent !important;
		color: #ffffff !important;
	}
	
	.history-section .uni-tag--circle {
		background-color: transparent !important;
		background: transparent !important;
		border: none !important;
		border-color: transparent !important;
		color: #ffffff !important;
	}
	
	.history-section .uni-tag--small {
		background-color: transparent !important;
		background: transparent !important;
		border: none !important;
		border-color: transparent !important;
		color: #ffffff !important;
	}
	
	.history-section .uni-tag-text--default {
		color: #ffffff !important;
	}
	
	.history-section .history-tag-item {
		margin-right: 10px !important;
		margin-bottom: 5px !important;
		display: inline-block !important;
		flex-shrink: 0;
	}
	
	/* 卡片圆角样式 */
	.store-item .uni-card {
		border-radius: 10px !important;
	}
</style>